<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的直播间</title>
    <style>
        *{margin: 0;padding: 0}
        .gift{
            width: 800px;
            height: 100px;
            position: fixed;
            bottom: 10px;
            left: calc((100% - 800px) / 2);
            border-radius: 10px;
            /*来点阴影*/
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            /*来点阴影*/
            background-color: rgba(255,255,255,0.8);
        }
        .gift-png{
            width: 80px;
            height: 80px;
            margin-top: 10px;
            float: left;
            margin-left: 10px;
            cursor: pointer;
            background-size: 100% 100%;
            border-radius: 20px;
        }
        .hj{
            background-image: url("imge/hj.png");
        }
        .hj:hover{
            background-image: url("imge/hj-dh.webp");
        }
        .fj{
            background-image: url("imge/fj.png");
        }
        .fj:hover{
            background-image: url("imge/fj-dh.webp");
        }
    </style>
</head>
<body>
    <div class="gift" id="gift">
        <div class="gift-png hj" onclick="showGift('火箭');"></div>
        <div class="gift-png fj" onclick="showGift('飞机');"></div>
    </div>
</body>
<script>
    let id = localStorage.getItem("userId");
    let addSend = document.getElementsByClassName("gift-png");

    function showGift(giftType) {
        console.log("开始了+++++++++++++++++++++++++++++++++++++");
        var giftContainer = document.getElementById("gift");
        var giftImage = document.createElement("img");
        giftImage.style.position = "absolute";
        giftImage.style.bottom = "-80px";
        giftImage.style.left = "calc((100% - 80px) / 2)";
        giftImage.style.width = "100px";
        giftImage.style.height = "100px";
        giftImage.className = "img";
        giftImage.classList.add("gift");
        giftImage.src = getGiftImageUrl(giftType);
        giftContainer.appendChild(giftImage);

        // 设置随机的初始位置和动画
        var initialPosition = Math.random() * (window.innerHeight - 80); // 减去图片的宽度
        giftImage.style.bottom = initialPosition + "px";
        animateGift(giftImage);
    }
    function init() {
        var userId = localStorage.getItem("userId");
        //如果为空就不连
        if(userId == null){
            return;
        }
        var wsProtocol = (window.location.protocol === 'http:') ? 'ws://localhost:' : 'wss://';
        var wsHost = 8081;
        var wsUrl = wsProtocol + wsHost + "/gift/"+userId;
        console.log(wsUrl);
        // 13398866923
        var ws = new WebSocket(wsUrl);
        ws.onopen = function(event){
            console.log("连接成功"+event.data);
        }
        ws.onclose = function(){
            console.log("连接关闭");
        }
        ws.onmessage = function(e){
            console.log(e.data);
            var data = JSON.parse(e.data);
            console.log(data);
        }
        ws.onerror = function(e){
            console.log(e);
        }

        for (let i = 0; i < addSend.length; i++) {
            let addSends = addSend[i];

            addSends.addEventListener("click", function () {
                // 在这里编写点击事件处理逻辑
                console.log("Gift PNG element clicked:", addSends);
                // 或者执行其他相关操作，如发送礼物等
                sendGift();
            });
        }

        function sendGift() {
            let src =  getGiftImageUrl("火箭");
            console.log( getGiftImageUrl("火箭"));
            //发送消息 JSON
            var msgData = JSON.stringify({
                "msg":src,
                "id":id
            })
            ws.send(msgData);
        }
    }
    init();

    function animateGift(giftImage) {
        var bottom = -200; // 设置初始位置
        var animationInterval = setInterval(function() {
            bottom += 2; // 控制速度
            giftImage.style.left = bottom + "px";

            // 到达底部时清除定时器
            if (bottom >= window.innerWidth) {
                clearInterval(animationInterval);
                giftImage.remove();
            }
        }, 30); // 控制动画帧率
    }

    function getGiftImageUrl(giftType) {
        // 根据礼物类型返回相应的图片URL
        switch (giftType) {
            case '火箭':
                return 'imge/hj-dh.webp';
            case '飞机':
                return 'imge/fj-dh.webp';
            default:
                return ''; // 若未匹配到则返回空字符串
        }
    }
</script>
</html>